<template>
  <van-nav-bar title="邮箱认证" left-arrow fixed @click-left="onBack" />

  <div class="clear"></div>
  <div class="h50"></div>
  <div class="clear"></div>
  <div class="user">
    <div class="user-image">
      <img :src="LoginAuth.avatar_cdn" alt="" />
    </div>
  </div>

  <div class="form">
    <van-form method="post">
      <van-field v-model="LoginAuth.email" name="email" label="邮箱" placeholder="邮箱" colon :rules="[{ required: true, message: '请填写邮箱' }]" />

      <div class="myorder_bg">
        <van-field v-model="LoginAuth.code" center required label="验证码" placeholder="请输入验证码">
          <template #button>
            <button size="small" type="primary" v-bind:class="[countdown ? 'reg_active' : 'reg_disActive']" @click="getCode">
              <span v-if="countdown">{{ text }}</span>
              <span v-if="!countdown">{{ text }} ({{ count }})</span>
            </button>
          </template>
        </van-field>
      </div>

      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit" @click="checkemail"> 提交 </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
  import { showSuccessToast, showFailToast, showNotify } from 'vant'
  export default {
    data() {
      return {
        LoginAuth: {},
        avatar: [],
        countdown: true, //验证码的状态，默认显示发送验证码
        count: '', //60秒倒计时
        timer: null,
        text: '发送验证码',
      }
    },
    methods: {
      onBack() {
        this.$router.go(-1)
      },
      async getCode() {
        const TIME_COUNT = 60
        if (!this.timer) {
          this.count = TIME_COUNT
          this.countdown = false
          this.text = '重新发送'
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--
            } else {
              this.countdown = true

              clearInterval(this.timer)
              this.timer = null
            }
          }, 1000)
        }
        // 发送验证码
        let result = await this.$api.send(this.LoginAuth)

        if (result.code == 1) {
          showSuccessToast(result.msg)
        } else {
          showFailToast(result.msg)
        }
      },
      // 邮箱认证
      async checkemail() {
        console.log(this.LoginAuth)
        let result = await this.$api.checkemail(this.LoginAuth)
        console.log(result)
        if (result.code == 1) {
          showNotify({
            type: 'success',
            message: result.msg,
            onClose: () => {
              this.$router.push('/business/base/index')
            },
          })
        } else {
          showNotify({
            type: 'warning',
            message: result.msg,
          })
        }
      },
    },
    created() {
      this.LoginAuth = this.$cookies.get('LoginAuth') ? this.$cookies.get('LoginAuth') : {}
    },
  }
</script>

<style>
  @import url('/assets/css/avatar.css');
  @import url('/assets/css/profile.css');
  .reg_active {
    width: 100px;
    height: 2rem;
    border-radius: 2rem;
    background: #12a9f4;
    color: #fff;
    border: none;
  }
  .reg_disActive {
    width: 100px;
    height: 2rem;
    border-radius: 2rem;
    background: #12a9f4;
    color: #fff;
    border: none;
  }
  .item {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 10px;
    position: relative;
  }
  .user {
    background: url(../assets/images/detail.png);
  }
  .item input {
    width: 80%;
    margin-bottom: 0;
  }

  .title {
    width: 70px;
    text-align: right;
  }
  .mui-title {
    width: 30%;
    margin: 0 auto;
  }
  #btn {
    position: absolute;
    width: 96px;
    height: 40px;
    right: 13px;
  }

  #button {
    width: 40%;
    height: 40px;
    display: block;
    margin: 0 auto;
    background: #08acee;
    border-color: #08acee;
    margin-top: 20px;
    color: #fff;
  }
</style>
